<template>
<section>
            <!-- <el-dropdown trigger="click" style="margin-bottom:10px;" key="fastMenu" v-show="!isDialogShow">
                <el-button round size="small" type="primary" plain class="el-dropdown-link">
                    <i><font-awesome-icon :icon="['far','edit']"/></i>&nbsp;快速入口
                </el-button>
                <el-dropdown-menu slot="dropdown"> 
                    <el-dropdown-item>新增入库</el-dropdown-item>
                    <el-dropdown-item>新增领用</el-dropdown-item>
                    <el-dropdown-item>新增退库</el-dropdown-item>
                    <el-dropdown-item>维修/报废</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
            <el-dropdown trigger="click"  key="outIn" v-show="!isDialogShow">
                <el-button round size="small" type="primary" plain class="el-dropdown-link">
                    <i><font-awesome-icon :icon="['fas','sign-out-alt']"/></i>&nbsp;导入/导出
                </el-button>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>导入</el-dropdown-item>
                    <el-dropdown-item>导出</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown> -->
            <el-row>
              <el-col :span="10">
                 <el-input style="margin-bottom:10px;"  size="small" placeholder="搜索名称" v-model="keySearch" class="input-with-select"> 
                    <el-button slot="append" icon="el-icon-search"></el-button>
                  </el-input> 
              </el-col>
            </el-row>
           
     <el-table
      v-loading="listLoading"
    border
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark" 
    style="width: 100%" 
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection">
    </el-table-column>
    <el-table-column
    fixed
      prop="assetName"
      label="名称"
      width="120"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      label="状态" 
      prop="status"
      width="70">
      <template slot-scope="scope">
        <el-tag  
          size="mini"
          :type="scope.row.status == 2 ? 'warning' : 'success'">
          {{scope.row.status==2?"在用":"闲置"}}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column
      prop="assetNum"
      label="编号"
      width="120">
    </el-table-column>
    <el-table-column
      prop="standardName"
      label="规格"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="unitPrice"
      label="单价"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="belongName"
      label="所属公司"
      width="120"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="assetAdmin"
      label="管理员"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="crateTime"
      label="入库时间"
      width="120"
      show-overflow-tooltip>
    </el-table-column>
  </el-table>
   <el-col :span="24" class="toolbar">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100, 200]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum">
        </el-pagination>
    </el-col>
</section>
   
</template>

<script>
import api from "@/service/api";
import http from "@/service/http";

import store from "@/store";
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapGetters } = createNamespacedHelpers("system/asset");

export default {
  data() {
    return {
      keySearch: ""
    };
  },
  computed: {
    //导入store的getters属性
    ...mapGetters([
      "isDialogShow",
      "listLoading",
      "pageSize",
      "totalNum",
      "currentPage",
      "ableTag",
      "tableData",
      "selects"
    ])
  },
  methods: {
    //导入actions方法
    ...mapActions([
      "toSelect",
      "showDialog",
      "handleSizeChange",
      "handleCurrentChange",
      "handleSelectionChange",
      "searchAssets"
    ]),
    setSelection(temp2) {
      var rows = temp2;
      this.tableData.forEach(row => { 
        if (rows.findIndex(item => item.id == row.id)>=0) { 
          this.$refs.multipleTable.toggleRowSelection(row,true);
        } else {
          this.$refs.multipleTable.toggleRowSelection(row, false); 
        }
      });
    }

    // searchAssets() {
    //   this.listLoading = true;
    //   var search = { pageNum: this.currentPage, pageSize: this.pageSize };
    //   http.post(api.sysApi.searchAssets, search).then(data => {
    //     this.tableData = data.data;
    //     this.totalNum = data.totalNum;
    //     this.listLoading = false;
    //   });
    // }
  },
  mounted() {
    this.searchAssets();
  }
};
</script>

<style>
.el-pagination {
  float: right;
}
</style>
